/**
 * Created by imac13 on 19/1/9.
 */
import React,{ Component } from 'react';
import {Card} from 'antd';
import axios from './../../axios';
import './detail.less'

export default class OrderDetail extends Component {
    state={};
    componentDidMount () {
        let orderId = this.props.match.params.orderId;
        if (orderId){
            this.getDetailInfo(orderId);
        }
    }
    getDetailInfo = (orderId) => {
        // let _this = this;
        let baseApi = 'https://www.easy-mock.com/mock/5a7278e28d0c633b9c4adbd7/api';
        axios.ajax({
            url:baseApi+'/order/detail',
            data:{
                params:{
                    orderId:orderId
                }
            }
        }).then((res)=>{
            if(res.code ==0){
                this.setState({
                    orderInfo:res.result
                });
                this.renderMap(res.result)
            }
        })
    };
    renderMap = (result)=>{
        // 创建地图实例,启动地图的点击事件，{enableMapClick:false}使地图无法点击(这个事件可加可不加)
        this.map = new window.BMap.Map("orderDetailMap");
        //地图的中心点，初始化地图，var point = new BMap.Point(116.404, 39.915);创建点坐标，设置中心点坐标和地图级别map.centerAndZoom(point, 15)
        // this.map.centerAndZoom('北京', 11);
        //添加地图控件
        this.addMapContol();
        //调用路线图绘制方法
        this.drawBikeRoute(result.position_list);
        //调用服务区
        this.drawServiceArea(result.area);

    };
    //添加地图控件
    addMapContol = ()=>{
        let map = this.map;
        map.addControl(new window.BMap.ScaleControl({anchor:window.BMAP_ANCHOR_TOP_RIGHT}));
        map.addControl(new window.BMap.NavigationControl({anchor:window.BMAP_ANCHOR_TOP_RIGHT}));
    };
    //绘制用户的行驶路线
    drawBikeRoute = (positionList)=>{
        let map = this.map;
        let startPoint = '';
        let endPoint = '';
        if (positionList.length>0){
            let first = positionList[0];
            let last = positionList[positionList.length-1];
            //起始坐标点
            startPoint = new window.BMap.Point(first.lon,first.lat);  //经度和纬度
            let startIcon = new window.BMap.Icon('/assets/start_point.png',new window.BMap.Size(36,42),{
                imageSize:new window.BMap.Size(36,42),
                anchor:new window.BMap.Size(36,42)
            });

            let startMarker = new window.BMap.Marker(startPoint,{icon:startIcon});
            this.map.addOverlay(startMarker);

            //结束坐标点
            endPoint = new window.BMap.Point(last.lon,last.lat);  //经度和纬度
            let endIcon = new window.BMap.Icon('/assets/end_point.png',new window.BMap.Size(36,42),{
                imageSize:new window.BMap.Size(36,42),
                anchor:new window.BMap.Size(36,42)
            });

            let endMarker = new window.BMap.Marker(endPoint,{icon:endIcon});
            this.map.addOverlay(endMarker);

            //连接路线图
            let trackPoint = [];
            for(let i=0;i<positionList.length;i++){
                let point = positionList[i];
                trackPoint.push(new window.BMap.Point(point.lon,point.lat))
            }

            let polyline = new window.BMap.Polyline(trackPoint,{
                strokeColor:'red',
                strokeWeight:3,
                strokeOpacity:1
            });
            this.map.addOverlay(polyline);
            this.map.centerAndZoom(endPoint, 11);

        }
    };

    //绘制服务区
    drawServiceArea = (positionList)=> {
        let trackPoint = [];
        for(let i=0;i<positionList.length;i++){
            let point = positionList[i];
            trackPoint.push(new window.BMap.Point(point.lon,point.lat))
        }

        let polygon = new window.BMap.Polygon(trackPoint,{
            strokeColor:'red',
            strokeWeight:4,
            strokeOpacity:1,
            fillColor:'#ff8605',
            fillOpacity:0.4
        });
        this.map.addOverlay(polygon);
        // this.map.centerAndZoom(endPoint, 11);
    };
    render(){
        const info = this.state.orderInfo || {};
        return(
            <div>
                <Card>
                    <div id="orderDetailMap" className="order-map"></div>
                    <div className="detail-items">
                        <div className="item-title">基础信息</div>
                        <ul className="detail-form">
                            <li>
                                <div className="detail-form-left">用车模式</div>
                                <div className="detail-form-content">{info.mode==1 ? '服务区' : '停车点'}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">订单编号</div>
                                <div className="detail-form-content">{info.order_sn}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">车辆编号</div>
                                <div className="detail-form-content">{info.bike_sn}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">用户姓名</div>
                                <div className="detail-form-content">{info.user_name}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">手机号码</div>
                                <div className="detail-form-content">{info.mobile}</div>
                            </li>
                        </ul>
                    </div>
                    <div className="detail-items">
                        <div className="item-title">行驶轨迹</div>
                        <ul className="detail-form">
                            <li>
                                <div className="detail-form-left">行程起点</div>
                                <div className="detail-form-content">{info.start_location}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">行程终点</div>
                                <div className="detail-form-content">{info.end_location}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">行驶里程</div>
                                <div className="detail-form-content">{info.distance/1000}公里</div>
                            </li>
                        </ul>
                    </div>
                </Card>
            </div>
        )
    }
}